<template>
  <div class="Router">
    <el-card class="box-card">
      <el-button type="primary" class="Addroute" plain @click="Addroute()">{{
        $t("message.center.dialogtitle.addrouter")
      }}</el-button>
      <!-- 这是 分页 -->
      <div class="block">
        <span class="demonstration">
          <!-- 用来展示数据的 -->
          <el-card class="box-card Router-one">
            <el-table
              :data="
                routersdata.router_tasks.slice(
                  (currentPage - 1) * pageSize,
                  currentPage * pageSize
                )
              "
              style="width: 100%"
            >
              <el-table-column
                v-for="(item, index) in tableheadr"
                :prop="index"
                :label="item"
                width="256px"
                :key="index"
              >
              </el-table-column>
              <el-table-column
                prop="action"
                class="action"
                :label="$t('message.center.routerheaders.action')"
              >
                <template slot-scope="scope" class="action">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)"
                  >
                    <i>
                      <img
                        src="../../../../assets/config/center/download.png"
                        alt=""
                      />
                    </i>
                  </el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)"
                    ><i class="el-icon-delete"></i
                  ></el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </span>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="current"
          :page-sizes="[5, 10, 15]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="routersdata.router_tasks.length"
        >
        </el-pagination>
      </div>
    </el-card>
    <div>
      <el-dialog
        :title="$t('message.center.dialogtitle.addrouter')"
        :visible.sync="addformdialog"
        width="450px"
      >
        <el-form
          :model="form"
          status-icon
          :rules="rules"
          ref="form"
          label-width="150px"
          class="demo-form"
          width="400px"
        >
          <el-form-item
            :label="$t('message.center.routerheaders.name')"
            prop="name"
          >
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('message.center.routerheaders.net_num')"
            prop="net_num"
          >
            <el-input v-model="form.net_num"></el-input>
          </el-form-item>

          <el-form-item :label="$t('message.center.routerheaders.mask_len')">
            <el-input v-model="form.mask_len"></el-input>
          </el-form-item>

          <el-form-item
            :label="$t('message.center.routerheaders.gateway')"
            prop="gateway"
          >
            <el-input v-model="form.gateway"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('form')">{{
              $t("message.center.buttom.confirm")
            }}</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <el-dialog
        :title="$t('message.center.dialogtitle.updataRouter')"
        :visible.sync="updatadialog"
        width="450px"
      >
        <el-form
          :model="updateform"
          status-icon
          :rules="rules"
          ref="form"
          label-width="150px"
          class="demo-form"
          width="400px"
        >
          <el-form-item
            :label="$t('message.center.routerheaders.name')"
            prop="name"
          >
            <el-input v-model="updateform.name"></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('message.center.routerheaders.net_num')"
            prop="net_num"
          >
            <el-input v-model="updateform.net_num"></el-input>
          </el-form-item>

          <el-form-item
            :label="$t('message.center.routerheaders.mask_len')"
            prop="mask_len"
          >
            <el-input v-model="updateform.mask_len"></el-input>
          </el-form-item>

          <el-form-item
            :label="$t('message.center.routerheaders.gateway')"
            prop="gateway"
          >
            <el-input v-model="updateform.gateway"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="updatamodification()">{{
              $t("message.center.buttom.confirm")
            }}</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<style scoped>
.box-card {
  width: 100%;
  height: 760px;
  margin: 0px 20px 0px 20px;
}
.Router {
  width: 100%;
  height: 1757px;
  display: flex;
}
.Router-one {
  width: 100%;
  height: 635px;
  display: flex;
  margin: 0px 20px 0px 0px;
}
.el-pagination {
  margin-top: 10px;
  text-align: center;
}
button.el-button.el-button--danger.el-button--mini {
  border: none;
  padding: 3px;
  background-color: #4e6d9d;
  /* margin-bottom: 79px; */
  /* top: auto; */
  /* margin-top: -32px; */
  position: absolute;
}
button.el-button.el-button--default.el-button--mini {
  padding: 0px;
  border: none;
}
.Addroute {
  background-color: #4e6d9d;
  color: white;
  /* height: 28px; */
  font-size: 12px;
  line-height: 5px;
  font-weight: 800;
  position: relative;
  left: 11px;
  margin-bottom: 10px;
  /* text-align: left; */
}
</style>
<script>
import LoginVue from "../../../Login.vue";
const ip_reg = /^(?:(?:2[0-4][0-9]\.)|(?:25[0-5]\.)|(?:1[0-9][0-9]\.)|(?:[1-9][0-9]\.)|(?:[0-9]\.)){3}(?:(?:2[0-5][0-5])|(?:25[0-5])|(?:1[0-9][0-9])|(?:[1-9][0-9])|(?:[0-9]))$/;
export default {
  methods: {
    handleSizeChange(pageSize) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = pageSize;
      this.$forceUpdate();
    },
    handleCurrentChange(currentPage) {
      // console.log(`当前页: ${val}`);
      this.currentPage = currentPage;
      this.$forceUpdate();
    },
    Addroute() {
      // 添加route
      this.addformdialog = true;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.form);
          this.$store.dispatch("addroutersdata", Adddatareturned);
          this.addformdialog = false;
          this.$message({
            message: "add success",
            type: "success",
          });
        } else {
          return false;
        }
      });
    },
    handleEdit(index, row) {
      this.updateform = row;
      this.updatadialog = true;
    },
    updatamodification() {
      this.$store.dispatch("updataroutersdata", this.updateform);
      this.updatadialog = false;
    },
    handleDelete(index, row) {
      this.$store.dispatch("deleteroutersdata", row.id);
    },
  },
  // created(){
  //   this.userList = this.$store.state.samroute.routersdata;
  // },
  computed: {
    routersdata() {
      console.log(this.$store.state.samroute.routersdata);
      return this.$store.state.samroute.routersdata;
    },
  },
  data() {
    var gateway = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入下一跳地址"));
      } else {
        if (!ip_reg.exec(value)) return callback(new Error("ip地址格式不对"));
        callback();
      }
    };
    var name = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入名称"));
      } else {
        callback();
      }
    };
    var net_num = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入网络号"));
      } else {
        if (!ip_reg.exec(value)) return callback(new Error("ip地址格式不对"));
        callback();
      }
    };
    return {
      currentPage: 1,
      current: 1,
      pageSize: 5,
      total: 0,
       userList: [],
      rules: {
        gateway: [{ validator: gateway, trigger: "blur" }],
        name: [{ validator: name, trigger: "blur" }],
        net_num: [{ validator: net_num, trigger: "blur" }],
      },
      tableData: [],
      tableheadr: {
        id: this.$t("message.center.routerheaders.id"),
        name: this.$t("message.center.routerheaders.name"),
        net_num: this.$t("message.center.routerheaders.net_num"),
        mask_len: this.$t("message.center.routerheaders.mask_len"),
        gateway: this.$t("message.center.routerheaders.gateway"),
        // action: this.$t("message.center.routerheaders.action"),
      },
      updateform: {},
      form: {
        name: "",
        net_num: "",
        mask_len: 24,
        group_id: parseInt(Math.random() * (4 - 1 + 1) + 1, 10),
        gateway: "",
        speed: 1024000,
      },
      addformdialog: false,
      updatadialog: false,
    };
  },
};
</script>